M

MLOG

Български

Научете как да внедрите безпроблемна интернационализация (i18n) във вашите Next.js приложения, за да достигнете до глобална аудитория. Разглежда маршрутизиране, превод на съдържание и най-добри практики.

Интернационализация в Next.js: Създаване на многоезични приложения за глобална аудитория

В днешния взаимосвързан свят изграждането на приложения, които обслужват глобална аудитория, вече не е лукс – то е необходимост. Next.js, мощна React рамка, предоставя стабилни функции за внедряване на интернационализация (i18n), което ви позволява да създавате многоезични приложения, предоставящи локализирано изживяване на потребителите по целия свят. Това изчерпателно ръководство ще ви преведе през основните концепции, техники и най-добри практики за изграждане на интернационализирани Next.js приложения.

Разбиране на интернационализацията и локализацията

Преди да се потопим в спецификата на i18n в Next.js, нека изясним ключовите термини:

По същество i18n подготвя вашето приложение за локализация. Като отделяте езиково зависимите елементи от основния код, вие улеснявате локализирането на приложението за различни пазари.

Защо да внедряваме интернационализация в Next.js?

Внедряването на i18n във вашето Next.js приложение предлага множество предимства:

Функции и конфигурация на i18n в Next.js

Next.js предлага вградена поддръжка за i18n чрез своите функции за маршрутизиране и управление на съдържанието. Следва разбивка на важните функции:

1. Конфигуриране на i18n в next.config.js

Основната конфигурация за i18n се намира във файла next.config.js. Ето един пример:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Масив от поддържани локали (езикови кодове)
    defaultLocale: 'en', // Локал по подразбиране, който да се използва
    localeDetection: true, // Активиране/деактивиране на автоматичното разпознаване на локал въз основа на настройките на браузъра (по избор)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Обяснение:

2. Маршрутизиране с префикси за локал

Next.js автоматично добавя префикс към маршрутите с локала. Например, ако имате страница на /about и локалът е 'es' (испански), URL адресът ще стане /es/about. Това позволява различни езикови версии на страниците и дава възможност на търсачките да индексират съдържание за всеки локал. Рамката се грижи за пренасочването и маршрутизирането вместо вас.

3. Използване на useRouter Hook

Hook-ът useRouter от next/router предоставя достъп до текущия локал и друга информация за маршрутизиране.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Текущ локал: {locale}

      
Налични локали: {locales.join(', ')}

      
Локал по подразбиране: {defaultLocale}

    

  );
}

export default MyComponent;

Обектът router предлага следните ключови свойства:

Стратегии за превод на съдържание

След като сте конфигурирали вашето Next.js приложение за i18n, ще трябва да внедрите стратегии за превод на съдържанието. Ето няколко популярни подхода:

1. Използване на специализирана система за управление на преводи (TMS)

За мащабни проекти с много езици, TMS е силно препоръчителна. Популярните опции включват:

Предимства:

2. Създаване на JSON файлове за превод

За по-малки проекти използването на JSON файлове за съхранение на преводи е прост и ефективен метод.

Примерна структура на директориите:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

Примерен en.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Примерен es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

Примерен MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

Този подход осигурява гъвкавост и е лесен за по-малки проекти. Обикновено е лесен за актуализиране и поддръжка.

3. Използване на библиотека за преводи

Няколко JavaScript библиотеки улесняват превода на съдържание във вашите React компоненти.

Пример с next-i18next (Инсталация: npm install next-i18next i18next react-i18next):

Създайте конфигурационен файл за i18n (напр. i18n.js във вашата основна директория):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

Създайте вашата Next.js конфигурация за next-i18next.


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // other configuration
}

module.exports = nextConfig

Добавете конфигурацията и импорта на превода във вашия _app.js:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

Създайте папка и я попълнете с локалите за вашите преводи.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

Примерен en/common.json:


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Използване на превода в компонент:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Този пример използва useTranslation hook за извличане на преводи въз основа на текущия локал.

Обработка на динамични маршрути и статично генериране на сайтове (SSG)

Интернационализацията става по-сложна при работа с динамични маршрути (напр. публикации в блог, продуктови страници) и статично генериране на сайтове (SSG).

1. Динамични маршрути (напр. /blog/[slug])

За динамични маршрути ще трябва да генерирате правилните пътища за всеки локал по време на компилация, използвайки getStaticPaths. Тази функция връща масив от пътища, които Next.js трябва да рендира предварително.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Извличане на данни за публикациите в блога

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // или 'blocking', ако искате да покажете състояние на зареждане
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Обяснение:

2. Статично генериране на сайтове (SSG) с getStaticProps

В getStaticProps можете да извлечете преведено съдържание въз основа на параметъра locale.


export async function getStaticProps({ params, locale }) {
  // Извличане на съдържание въз основа на локала и параметрите
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Функцията getPostBySlug трябва да извлече преведеното съдържание за дадения slug и локал, което може да бъде извлечено от вашите файлове с преводи, база данни или CMS.

3. Рендиране от страна на сървъра (SSR) с getServerSideProps

За съдържание, което трябва да бъде извлечено по време на заявката, използвайте getServerSideProps. Това е полезно, ако съдържанието се променя често или е персонализирано за всеки потребител.


export async function getServerSideProps({ params, locale, req, res }) {
  // Извличане на данни въз основа на локала и параметрите (напр. от база данни)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Най-добри практики за интернационализация в Next.js

Следването на тези най-добри практики ще ви помогне да изградите стабилни, поддържаеми и лесни за използване многоезични приложения:

SEO съображения за интернационализирани уебсайтове

Оптимизирането на вашия интернационализиран уебсайт за търсачки е от съществено значение за привличане на органичен трафик от цял свят. Ето някои ключови SEO най-добри практики:

Пример: Изграждане на прост многоезичен блог

Нека създадем опростен пример за многоезичен блог, използвайки Next.js. Това ще предостави по-конкретна илюстрация за това как да приложим обсъдените по-горе концепции.

1. Настройка на проекта

Създайте нов Next.js проект:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. Конфигуриране на i18n (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. Създаване на файлове за превод

Създайте папка locales в основната директория и добавете следните JSON файлове:

locales/en.json:


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. Създаване на компонента за публикация в блога (напр. components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. Създаване на главната страница (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

Този опростен пример демонстрира основните принципи на интернационализацията в Next.js. Можете да разширите тази основна рамка, за да включите по-сложни функции, като динамични маршрути и интеграция със системи за управление на преводи. Помислете за подобряване на връзките по-горе с компонента Link и добавете съответния атрибут locale.

6. Стартиране на приложението

Стартирайте приложението с:


npm run dev

Сега можете да получите достъп до вашия блог на http://localhost:3000 (английски), http://localhost:3000/es (испански) и http://localhost:3000/fr (френски). Трябва да видите заглавието и съдържанието на публикацията в блога, преведени въз основа на избрания локал.

Заключение

Next.js предоставя изчерпателен набор от функции за внедряване на интернационализация във вашите уеб приложения. Следвайки принципите и техниките, очертани в това ръководство, можете да създавате многоезични приложения, които предоставят локализирани изживявания на потребители по целия свят. Не забравяйте да планирате стратегията си за i18n отрано, да изберете правилния метод за превод за вашите нужди и да приоритизирате потребителското изживяване. С внимателно планиране и изпълнение можете да изградите приложения, които резонират с глобална аудитория и отключват нови възможности за растеж. Непрекъснатото учене, поддържането на актуалност с най-новите версии и най-добрите практики ще гарантират, че използвате ефективно вашите инструменти и технологии.

С напредването на технологиите очаквайте да се появят по-усъвършенствани функции за i18n. Способността да се достига до потребители от различни култури и езикови групи ще остане ключов приоритет за разработчиците на приложения по целия свят. Следователно, овладяването на основите на i18n е ценно умение, което ще повиши вашата стойност в днешния глобален пейзаж на разработка.